<template>
	<block v-for="(items,indexs) in data.list" :key="items.id">

		<view class="jf-comment" v-if="items.is_delete !== 1">
			<image :src="items.userinfo.avatar || headerIcon" mode="aspectFill" class="jf-comment__logo"  @click="navGo('/pages/index/user/user?id=' + items.userinfo.uid)"></image>
			<view class="jf-comment__container">
				<view class="jf-comment__dominant">
					<view class="jf-comment__dominant-name">
					
						<view class="jf-comment__dominant-name-text">{{items.userinfo.nickname}}</view>
						<view class="jf-comment__dominant-label" v-if="data.authorId === items.userinfo.uid || items.userinfo.uid === props.uid">{{$t(items.userinfo.uid === data.authorId ? 'index.info.comment.me' : 'index.info.comment.author')}}</view>
					</view>
					<view class="jf-comment__dominant-star" @click="star(items)">
						<image :src="items.is_star === 1 ? startIcon : unStartIcon"></image>
						<view>{{items.star}}</view>
					</view>
				</view>
				<view class="jf-comment__remark">
					<view class="jf-comment__remark-text">{{items.content}}</view>
					<image src="@/static/images/index/icon012.png" class="jf-comment__remark-btn"></image>
				</view>
				<view class="jf-comment__info">
					<view>{{DateTimeUtils.parseTime(items.add_time)}}</view>
					<view>IP：{{items.addr}}</view>
					<view @click="remove(items)" v-if="items.uid === data.authorId">{{$t('index.info.comment.remove')}}</view>
					<view @click="reply(items, items, 2)">{{$t('index.info.comment.reply')}}</view>
				</view>
				
				<block v-for="(item,index) in items.apply" :key="item.uid" v-if="items.is_delete !== 1">
					<view class="jf-comment-child" v-if="item.is_delete !== 1">
						<image :src="item.from_userinfo.avatar || headerIcon" mode="aspectFill" class="jf-comment-child__logo"></image>
						<view class="jf-comment-child__container">
							<view class="jf-comment-child__dominant">
								<view class="jf-comment-child__dominant-name">{{item.from_userinfo.nickname}}</view>
								<view class="jf-comment-child__dominant-label" v-if="data.authorId === item.from_userinfo.uid || items.userinfo.uid === props.uid">{{$t(items.userinfo.uid != data.authorId ? 'index.info.comment.me' : 'index.info.comment.author')}}</view>
							</view>
							<view class="jf-comment-child__remark">
								<view class="jf-comment-child__remark-text">
									<block v-if="item.rid">
										<text>{{$t('index.info.comment.reply')}}</text>
										<text>{{item.to_userinfo.nickname}}：</text>
									</block>
									<text>{{item.content}}</text>
								</view>
								<image src="@/static/images/index/icon012.png" class="jf-comment-child__remark-btn"></image>
							</view>
							<view class="jf-comment-child__info">
								<view>{{DateTimeUtils.parseTime(item.add_time)}}</view>
								<view>IP：{{item.addr}}</view>
								<view @click="remove(item)" v-if="item.uid === data.authorId">{{$t('index.info.comment.remove')}}</view>
								<view @click="reply(items, item, 3)">{{$t('index.info.comment.reply')}}</view>
							</view>
						</view>
						<view class="jf-comment-child__star" @click="star(item)">
							<image :src="item.is_star === 1 ? startIcon : unStartIcon"></image>
							<view>{{item.star}}</view>
						</view>
					</view>
				</block>
				<view class="jf-comment__more" v-if="items.total_apply > items.apply.length" @click="more(items)">{{$t(items.loading ? 'index.info.comment.loading' : 'index.info.comment.more')}}</view>
			</view>
		</view>
	</block>
	
	
	<cover-view class="js-comment__remove" v-if="data.showRemove">
		<cover-view class="js-comment__remove-box">
			<cover-view class="js-comment__remove-title">{{$t('index.info.remove.title')}}</cover-view>
			<cover-view class="js-comment__remove-content">{{$t('index.info.remove.content')}}</cover-view>
			<cover-view class="js-comment__remove-btns">
				<cover-view @click="data.showRemove = false">{{$t('index.info.remove.cancel')}}</cover-view>
				<cover-view @click="confirmRemove()">{{$t('index.info.remove.remove')}}</cover-view>
			</cover-view>
		</cover-view>
	</cover-view>
</template>

<script lang="ts" setup>
	import DateTimeUtils from "@/static/utils/DateTimeUtils"
	import unStartIcon from "@/static/images/index/icon006.png"
	import startIcon from "@/static/images/index/icon005.png"
	import headerIcon from "@/static/images/common/header_icon.png"
	import { reactive, watch } from "vue";
	import { useStore } from "@/store/main"
	
	const store = useStore()
	const props = withDefaults(defineProps<{
		modelValue: any[]
		uid?: number
	}>(),{
		modelValue: () => [],
		uid: null
	})
	const emits = defineEmits<{
		(e: "reply", parent:any, item:any, type:number):void
		(e: "star", item:any):void
		(e: "more", item:any):void
		(e: "remove", item:any):void
	}>()
	const data = reactive({
		authorId: store.getUserinfo.uid,
		list: [],
		showRemove: false,
		item: null
	})
	
	const remove = (item:any):void => {
		data.showRemove = true
		data.item = item
	}
	const reply = (parent:any, item:any, type:number):void => {
		emits("reply", parent, item, type)
	}
	const star = (item:any):void => {
		emits("star", item)
	}
	const more = (item:any):void => {
		emits("more", item)
	}
	const confirmRemove = ():void => {
		data.showRemove = false
		emits("remove", data.item)
	}
	const navGo = (url : string) : void => {
		uni.navigateTo({ url })
	}
	
	watch(() => props.modelValue, (nVal) => {
		data.list = nVal
	},{
		deep: true,
		immediate: true
	})
</script>

<style lang="scss">
	.jf-comment{
		@include layout(row, flex-start);
		width: 686rpx;
		padding: 32rpx 0;
		border-bottom: 2rpx solid #EDEFF3;
		margin-left: 32rpx;
		box-sizing: border-box;
		&:last-child{
			border-bottom: none;
		}
		.jf-comment__logo{
			width: 64rpx;
			height: 64rpx;
			border-radius: 32rpx;
			flex-shrink: 0;
		}
		.jf-comment__container{
			margin-left: 20rpx;
			flex-grow: 1;
			.jf-comment__dominant{
				@include layout();
				width: 100%;
				height: 64rpx;
				.jf-comment__dominant-name{
					@include layout();
					height: 64rpx;
					flex-grow: 1;
					.jf-comment__dominant-name-text{
						font-weight: 400;
						color: #B2B9C6;
						line-height: 32rpx;
						font-size: 24rpx;
					}
					.jf-comment__dominant-label{
						height: 32rpx;
						padding: 0 16rpx;
						border-radius: 16rpx;
						background: #F2F4F6;
						margin-left: 12rpx;
						flex-shrink: 0;
						font-weight: 400;
						color: #B2B9C6;
						line-height: 32rpx;
						font-size: 18rpx;
					}
				}
				
				.jf-comment__dominant-star{
					@include layout(column, flex-end, center);
					height: 64rpx;
					font-size: 20rpx;
					font-family: Avenir;
					line-height: 24rpx;
					image{
						width: 32rpx;
						height: 32rpx;
						margin-bottom: 4rpx;
					}
					view{
						min-width: 32rpx;
						text-align: center;
					}
				}
			}
			.jf-comment__remark{
				@include layout(row, flex-start);
				margin-top: 18rpx;
				.jf-comment__remark-text{
					flex-grow: 1;
					font-size: 24rpx;
					font-weight: 400;
					line-height: 36rpx;
				}
				.jf-comment__remark-btn{
					width: 24rpx;
					height: 24rpx;
					margin-top: 6rpx;
					margin-left: 10rpx;
					flex-shrink: 0;
					margin-right: 6rpx;
				}
			}
			.jf-comment__info{
				margin-top: 16rpx;
				@include layout();
				font-weight: 400;
				color: #B2B9C6;
				line-height: 28rpx;
				font-size: 20rpx;
				view{
					margin-right: 24rpx;
					&:nth-child(3){
						color: #6B7280;
					}
					&:nth-child(4){
						color: #6B7280;
					}
				}
			}
			
			.jf-comment-child{
				margin-top: 28rpx;
				@include layout(row, flex-start);
				.jf-comment-child__logo{
					width: 40rpx;
					height: 40rpx;
					border-radius: 20rpx;
					flex-shrink: 0;
				}
				.jf-comment-child__container{
					flex-grow: 1;
					margin: 0 16rpx;
					.jf-comment-child__dominant{
						width: 100%;
						height: 0 16rpx;
						@include layout();
						.jf-comment-child__dominant-name{
							font-weight: 400;
							color: #B2B9C6;
							line-height: 32rpx;
							font-size: 24rpx;
							@include textOverflow(1);
						}
						.jf-comment-child__dominant-label{
							height: 32rpx;
							padding: 0 16rpx;
							border-radius: 16rpx;
							background: #F2F4F6;
							margin-left: 12rpx;
							flex-shrink: 0;
							font-weight: 400;
							color: #B2B9C6;
							line-height: 32rpx;
							font-size: 18rpx;
						}
					}
					.jf-comment-child__remark{
						@include layout(row, flex-start);
						margin-top: 8rpx;
						.jf-comment-child__remark-text{
							font-weight: 400;
							line-height: 36rpx;
							font-size: 24rpx;
							text{
								&:nth-child(2){
									color: #B2B9C6;
									margin-left: 10rpx;
								}
							}
						}
						.jf-comment-child__remark-btn{
							width: 24rpx;
							height: 24rpx;
							flex-shrink: 0;
							margin-left: 8rpx;
							margin-top: 8rpx;
							margin-right: 6rpx;
						}
					}
					.jf-comment-child__info{
						margin-top: 16rpx;
						@include layout();
						font-weight: 400;
						color: #B2B9C6;
						line-height: 28rpx;
						font-size: 20rpx;
						view{
							margin-right: 24rpx;
							&:nth-child(3){
								color: #6B7280;
							}
							&:nth-child(4){
								color: #6B7280;
							}
						}
					}
				}
				.jf-comment-child__star{
					@include layout(column, flex-end);
					font-size: 20rpx;
					font-family: Avenir;
					color: #6B7280;
					line-height: 24rpx;
					flex-shrink: 0;
					padding-top: 16rpx;
					image{
						width: 32rpx;
						height: 32rpx;
						margin-bottom: 4rpx;
					}
					view{
						min-width: 32rpx;
						text-align: center;
					}
				}
			}
			.jf-comment__more{
				font-weight: 400;
				color: #2C5998;
				line-height: 32rpx;
				font-size: 24rpx;
				margin-top: 16rpx;
				padding-left: 56rpx;
			}
		}
	}
	
	.js-comment__remove{
		position: fixed;
		z-index: 999;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.6);
		.js-comment__remove-box{
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			width: 556rpx;
			background: #ffffff;
			border-radius: 32rpx;
			padding-top: 48rpx;
			text-align: center;
			.js-comment__remove-title{
				font-weight: 500;
				font-size: 32rpx;
				line-height: 40rpx;
			}
			.js-comment__remove-content{
				font-weight: 400;
				color: #6B7280;
				line-height: 44rpx;
				margin-top: 36rpx;
				font-size: 28rpx;
			}
			.js-comment__remove-btns{
				@include layout();
				margin-top: 36rpx;
				border-top: 2rpx solid #EAEDF4;
				cover-view{
					width: 50%;
					line-height: 104rpx;
					font-weight: 400;
					font-size: 32rpx;
					&:nth-child(2){
						color: #FF0000;
						border-left: 2rpx solid #EAEDF4;
					}
				}
			}
		}
	}
</style>
